<template>
	<div class="dPublish">
		<div class="release">
			<div class="wCen">
				<div class="formBox">
					<el-form ref="form" :model="form" :rules="formValidate" label-position="top">
						<el-row :gutter="52">
							<el-col :sm="12" :xs="24">
								<el-form-item :label="$t('demand-publish-supply-productName')" prop="title">
									<el-input v-model="form.title" :maxlength="50" clearable
										:placeholder="$t('demand-placeholder-publish-supply-productName')" />
									<p class="my-tip">{{ $t("max-length") }} <em>50</em> {{ $t("chars") }}</p>
								</el-form-item>
							</el-col>
							<el-col :sm="12" :xs="24">
								<el-form-item :label="$t('demand-publish-supply-companyName')" prop="companyName">
									<el-input v-model="form.companyName" :maxlength="50" clearable
										:placeholder="$t('demand-placeholder-publish-supply-companyName')" />
									<p class="my-tip">{{ $t("max-length") }} <em>50</em> {{ $t("chars") }}</p>
								</el-form-item>
							</el-col>
							<el-col :sm="12" :xs="24">
								<el-form-item :label="$t('demand-publish-supply-companyAddress')" prop="companyAddress">
									<el-input v-model="form.companyAddress" :maxlength="50" clearable
										:placeholder="$t('demand-placeholder-publish-supply-companyAddress')" />
									<p class="my-tip">{{ $t("max-length") }} <em>50</em> {{ $t("chars") }}</p>
								</el-form-item>
							</el-col>
							<el-col :sm="12" :xs="24">
								<el-form-item :label="$t('demand-publish-supply-production')" prop="outputNum">
									<el-input v-model="form.outputNum" :maxlength="50" clearable
										:placeholder="$t('demand-placeholder-publish-supply-production')" />
									<p class="my-tip">{{ $t("demand-placeholder-publish-supply-production") }}</p>
								</el-form-item>
							</el-col>
							<el-col :sm="24" :xs="24">
								<el-form-item :label="$t('demand-publish-supply-productCategoryId')"
									prop="productCategoryId">
									  <el-radio-group v-model="form.productCategoryId">
									    <mybox :category="item" :key="item.id" v-for="item in productCategoryOptions"></mybox>
									  </el-radio-group>
									
								</el-form-item>
							</el-col>
							<el-col :sm="24" :xs="24">
								<el-form-item :label="$t('demand-publish-supply-productBrand')" prop="brandName">
									<el-input v-model="form.brandName" :maxlength="50" clearable
										:placeholder="$t('demand-placeholder-publish-supply-productBrand')" />
									<p class="my-tip">{{ $t("max-length") }} <em>50</em> {{ $t("chars") }}。</p>
								</el-form-item>
							</el-col>
							<el-col :sm="12" :xs="24">
								<el-form-item :label="$t('demand-publish-supply-brandLogo')" prop="brandImage">
									<common-image-upload v-model="form.brandImage" :file-size="2" :limit="1" clearable
										:placeholder="$t('demand-placeholder-publish-supply-brandLogo')"></common-image-upload>
									<p class="my-tip">{{ $t("mem-size-suggest") }}<em>200px*200px</em></p>
								</el-form-item>
							</el-col>

							<el-col :sm="12" :xs="24">
								<el-form-item :label="$t('demand-publish-supply-productPhoto')" prop="image">
									<common-image-upload v-model="form.image" :file-size="2" :limit="1" clearable
										:placeholder="$t('demand-placeholder-publish-supply-productPhoto')"></common-image-upload>
									<p class="my-tip">{{ $t("mem-size-suggest") }}<em>200px*200px</em></p>
								</el-form-item>
							</el-col>
							<el-col :sm="24" :xs="24">
								<el-form-item :label="$t('demand-publish-supply-intro')" prop="descr">
									<el-input v-model="form.descr" type="textarea" :rows="4" :maxlength="200"
										clearable :placeholder="$t('demand-placeholder-publish-supply-intro')" />
									<p class="my-tip">{{ $t("max-length") }} <em>200</em> {{ $t("chars") }}</p>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
					<div class="boxFooter">
						<el-button type="success" @click="handleSubmit"
							:loading="loading">{{ $t("demand-publish-btn") }}</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		publish,
		getEditDetail,
		edit,
		getProductCategory
	} from "@/api/demand";
	 import Mybox from './mybox'
	export default {
		layout: "front",
		components: {
		  Mybox
		},
		computed: {
			offset() {
				return this.isMobile ? 0 : 2;
			},
			id() {
				return this.$route.query.id || "";
			},
			isEdit() {
				return this.id ? true : false;
			},
		},
		data() {
			return {
				item: null,
				loading: false,
				productCategoryOptions: [],
				form: {
					type: 2, // 1求购 2供应 
					title: "",
					companyName: "",
					companyAddress: "",
					outputNum: "",
					productCategoryId: "",
					productCategoryName: "",
					brandName: "",
					brandImage: "",
					image: "",
					descr: "",
					id: "",
				},
				formValidate: {
					title: [{
						required: true,
						message: this.$t("demand-placeholder-publish-supply-productName"),
						trigger: "blur",
					}, ],

					production: [{
						required: true,
						message: this.$t("demand-placeholder-publish-supply-production"),
						trigger: "blur",
					}, ],
					productCategoryId: [{
						required: true,
						message: this.$t("demand-placeholder-publish-supply-productCategoryId"),
						trigger: "change",
					}, ],
					companyName: [{
						required: true,
						message: this.$t("demand-placeholder-publish-supply-companyName"),
						trigger: "blur",
					}, ],
					companyAddress: [{
						required: true,
						message: this.$t("demand-placeholder-publish-supply-companyAddress"),
						trigger: "blur",
					}, ],
					outputNum: [{
						required: true,
						message: this.$t("demand-placeholder-publish-supply-productBrand"),
						trigger: "blur",
					}, ],
					brandName: [{
						required: true,
						message: this.$t("emand-placeholder-publish-supply-production"),
						trigger: "blur",
					}, ],
					brandImage: [{
							required: true,
							message: this.$t("demand-placeholder-publish-supply-brandLogo"),
						},
						{
							validator: (rule, value, callback) => {
								if (this.form.brandImage.length == 0) {
									callback(new Error(this.$t("demand-placeholder-publish-supply-brandLogo")));
								} else {
									callback();
								}
							},
							trigger: "change",
						},
					],
					image: [{
							required: true,
							message: this.$t("demand-placeholder-publish-supply-productPhoto"),
						},
						{
							validator: (rule, value, callback) => {
								if (this.form.image.length == 0) {
									callback(new Error(this.$t("demand-placeholder-publish-supply-productPhoto")));
								} else {
									callback();
								}
							},
							trigger: "change",
						},
					],
					descr: [{
						required: true,
						message: this.$t("demand-placeholder-publish-supply-intro"),
						trigger: "blur",
					}, ],
				},
				loading: false,
			};
		},
		created() {
			if (this.userInfo) {
				this.form.companyName = this.userInfo.companyName;
			}
			console.log("编辑", this.item);
			if (this.isEdit) {
				this.getDetailFun();
			}
			
		},
		mounted() {
			this.getProductCategory()
		},
		methods: {
			// 获取详情数据
			getDetailFun() {
				this.invoke(getEditDetail, this.id).then((res) => {
					if (res && res.code == 200) {
						this.item = res.data;
						console.log("详情数据：", this.item);
						this.$nextTick(() => {
							this.initData();
						});
					}
				});
			},
			getProductCategory(){
				this.invoke(getProductCategory).then((res) => {
					if (res && res.code == 200) {
						this.productCategoryOptions=res.data
					}
				});
			},
			initData() {
				this.form.id = this.id;
				this.form.title = this.item.title;
				this.form.companyName = this.item.companyName;
				this.form.companyAddress = this.item.companyAddress;
				this.form.outputNum = this.item.outputNum;
				this.form.production = this.item.production;
				this.form.productCategoryId = this.item.productCategoryId;
				this.form.brandName = this.item.brandName;
				this.form.brandImage = this.item.brandImage;
				this.form.image = this.item.image;
				this.form.descr = this.item.descr;
			},
			change(data) {
				this.form.productCategoryId = data;
			},
			//发布与修改
			handleSubmit() {
				this.$refs.form.validate((valid) => {
					if (valid) {
						// 编辑
						if (this.isEdit) {
							this.invoke(edit, this.form).then((res) => {
								if (res && res.code == 200) {
									this.$message.success(this.$t("demand-publish-edit-success"));
									 this.back()
								}
							});
							// 新增
						} else {
							this.invoke(publish, this.form).then((res) => {
								if (res && res.code == 200) {
									this.$message.success(this.$t("demand-publish-success"));
									 this.back()
								}
							});
						}
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped src="@/assets/styles/demand-publish.scss"></style>